<template>
	<div id="app">
		<BaseHeader></BaseHeader>
		<div class="main-container">
			<BaseSidebar v-if="isRouterAlive"></BaseSidebar>
			<div class="main-content">
				<BaseContentTitle></BaseContentTitle>
				<router-view v-if="isRouterAlive"></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "./components/BaseHeader.vue";
	import BaseSidebar from "./components/BaseSidebar.vue";
	import BaseContentTitle from "./components/BaseContentTitle.vue";

	export default {
		name: "app",
		components: {
			BaseHeader,
			BaseSidebar,
			BaseContentTitle
		},
		provide() {
			return {
				reload: this.reload
			}
		},
		data() {
			return {
				isRouterAlive: true
			}
		},
		methods: {
			reload() {
				this.isRouterAlive = false
				this.$nextTick(function() {
					this.isRouterAlive = true
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main-container {
		flex: 1;
		width: 100%;
		display: flex;
		.main-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 16px;
			box-sizing: border-box;
			overflow: hidden;
		}
	}
</style>